<template>
  <button
    class="tui-btn flex-row flex-center"
    :class="[
      plain ? 'tui-' + type + '-outline' : 'tui-btn-' + (type || 'primary'),
      getDisabledClass(disabled, type, plain),
      getShapeClass(shape, plain),
      getShadowClass(type, shadow, plain),
      bold ? 'tui-text-bold' : '',
      link ? 'tui-btn__link' : '',
      flexItem? 'flex-item' : ''
    ]"
    :hover-class="getHoverClass(disabled, type, plain)"
    :style="{ width, height, margin, background, padding, borderRadius, fontSize: size + 'rpx'}"
    :loading="loading"
    :form-type="formType"
    :open-type="openType"
    :disabled="disabled"
    @getuserinfo="bindgetuserinfo"
    @getphonenumber="bindgetphonenumber"
    @contact="bindcontact"
    @error="binderror"
    @click.stop="handleClick"
  >
    <slot />
    <text
      :style="{fontSize: size + 'rpx'}"
      :class="[
        plain ? 'tui-' + type + '-outline-text' : 'tui-btn-' + (type || 'primary') + '-text'
      ]"
      :hover-class="getHoverClass(disabled, type, plain) + '-text'"
    >{{ text }}</text>
  </button>
</template>

<script>
export default {
  name: 'TuiButton',
  // #ifndef MP-QQ
  behaviors: ['wx://form-field-button'],
  // #endif
  props: {
    // 样式类型 primary, white, danger, warning, green,blue, gray，black,brown,gray-primary,gray-danger,gray-warning,gray-green
    type: {
      type: String,
      default: 'primary'
    },
    background: {
      type: String,
      default: ''
    },
    // 是否加阴影
    shadow: {
      type: Boolean,
      default: true
    },
    // 宽度 rpx或 %
    width: {
      type: String,
      default: '100%'
    },
    // 高度 rpx
    height: {
      type: String,
      default: '96rpx'
    },
    // 字体大小 rpx
    size: {
      type: Number,
      default: 34
    },
    bold: {
      type: Boolean,
      default: false
    },
    margin: {
      type: String,
      default: '0'
    },
    padding: {
      type: String,
      default: '0'
    },
    // 形状 circle(圆角), square(默认方形)，rightAngle(平角)
    shape: {
      type: String,
      default: 'square'
    },
    plain: {
      type: Boolean,
      default: false
    },
    // link样式，去掉边框，结合plain一起使用
    link: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 禁用后背景是否为灰色 （非空心button生效）
    disabledGray: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    formType: {
      type: String,
      default: ''
    },
    openType: {
      type: String,
      default: ''
    },
    index: {
      type: [Number, String],
      default: 0
    },
    // 是否需要阻止重复点击【默认200ms】
    preventClick: {
      type: Boolean,
      default: false
    },
    preventClickTime: {
      type: Number,
      default: 200
    },
    debounce: {
      type: Boolean,
      default: false
    },
    debounceTime: {
      type: Number,
      default: 200
    },
    flexItem: {
      type: Boolean,
      default: false
    },
    text: {
      type: String,
      default: ''
    },
    borderRadius: {
      type: String,
      default: '14rpx'
    }
  },
  data() {
    return {
      time: 0,
      timer: null
    }
  },
  methods: {
    handleClick(e) {
      e.stopPropagation()
      if (this.disabled) return
      if (this.debounce) {
        if (this.timer) clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.$emit('click', {
            index: Number(this.index)
          })
        }, this.debounceTime)
      } else {
        if (this.preventClick) {
          if (new Date().getTime() - this.time <= this.preventClickTime) return
          this.time = new Date().getTime()
          setTimeout(() => {
            this.time = 0
          }, this.preventClickTime)
        }
        this.$emit('click', {
          index: Number(this.index)
        })
      }
    },
    bindgetuserinfo({ detail = {}} = {}) {
      this.$emit('getuserinfo', detail)
    },
    bindcontact({ detail = {}} = {}) {
      this.$emit('contact', detail)
    },
    bindgetphonenumber({ detail = {}} = {}) {
      this.$emit('getphonenumber', detail)
    },
    binderror({ detail = {}} = {}) {
      this.$emit('error', detail)
    },
    getShadowClass: function(type, shadow, plain) {
      let className = ''
      if (shadow && type != 'white' && !plain) {
        className = 'tui-shadow-' + type
      }
      return className
    },
    getDisabledClass: function(disabled, type, plain) {
      let className = ''
      if (disabled && type != 'white' && type.indexOf('-') == -1) {
        const classVal = this.disabledGray ? 'tui-gray-disabled' : 'tui-dark-disabled'
        className = plain ? 'tui-dark-disabled-outline' : classVal
      }
      return className
    },
    getShapeClass: function(shape, plain) {
      let className = ''
      if (shape == 'circle') {
        className = plain ? 'tui-outline-fillet' : 'tui-fillet'
      } else if (shape == 'rightAngle') {
        className = plain ? 'tui-outline-rightAngle' : 'tui-rightAngle'
      }
      return className
    },
    getHoverClass: function(disabled, type, plain) {
      let className = ''
      if (!disabled) {
        className = plain ? 'tui-outline-hover' : 'tui-' + (type || 'primary') + '-hover'
      }
      return className
    }
  }
}
</script>

<style scoped lang="scss">
.tui-btn-primary {
	background-image: $color-background-button !important;
  color: $font-color-button;
}

.tui-btn-primary-text{
  color: $font-color-button;
}

.tui-shadow-primary {
	box-shadow: $color-shadow-button;
}

.tui-btn-danger {
	background: $color-error !important;
  color: #FFFFFF;
}

.tui-btn-danger-text{
  color: #FFFFFF;
}

.tui-shadow-danger {
	box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.2);
}

.tui-btn-warning {
	background: $color-warning !important;
  color: #FFFFFF;
}

.tui-btn-warning-text{
  color: #FFFFFF;
}

.tui-shadow-warning {
	box-shadow: 0 10rpx 14rpx 0 rgba(252, 135, 45, 0.2);
}

.tui-btn-green {
	background: $color-success !important;
  color: #FFFFFF;
}

.tui-btn-green-text{
  color: #FFFFFF;
}

.tui-shadow-green {
	box-shadow: 0 10rpx 14rpx 0 rgba(7, 193, 96, 0.2);
}

.tui-btn-blue {
	background: #007aff !important;
  color: #FFFFFF;
}

.tui-btn-blue-text{
  color: #FFFFFF;
}

.tui-shadow-blue {
	box-shadow: 0 10rpx 14rpx 0 rgba(0, 122, 255, 0.2);
}

.tui-btn-white {
	background: #FFFFFF!important;
  color: #333;
}

.tui-btn-white-text{
  color: #333;
}

.tui-btn-gray {
	background: #bfbfbf !important;
  color: #FFFFFF;
}

.tui-btn-gray-text{
  color: #FFFFFF;
}

.tui-btn-black {
	background-image: $color-background-button-black !important;
  color: $color-primary;
}

.tui-btn-black-text{
  color: $color-primary;
}

.tui-btn-brown{
	background: #ac9157 !important;
  color: #FFFFFF !important;
}

.tui-btn-brown-text{
  color: #FFFFFF !important;
}

.tui-btn-gray-black {
	background: $color-background !important;
  color: $color-secondary;
}

.tui-btn-gray-black-text{
  color: $color-secondary;
}

.tui-btn-gray-primary {
	background: #f2f2f2 !important;
  color: $color-primary !important;
}

.tui-btn-gray-primary-text{
  color: $color-primary !important;
}

.tui-gray-primary-hover {
	background: #d9d9d9 !important;
}

.tui-btn-gray-green {
	background: #f2f2f2 !important;
  color: $color-success !important;
}

.tui-btn-gray-green-text{
  color: $color-success !important;
}

.tui-gray-green-hover {
	background: #d9d9d9 !important;
}

.tui-btn-gray-danger {
	background: #f2f2f2 !important;
  color: $color-error !important;
}

.tui-btn-gray-danger-text{
  color: $color-error !important;
}

.tui-gray-danger-hover {
	background: #d9d9d9 !important;
}

.tui-btn-gray-warning {
	background: #f2f2f2 !important;
  color: $color-warning !important;
}

.tui-btn-gray-warning-text{
  color: $color-warning !important;
}

.tui-gray-warning-hover {
	background: #d9d9d9 !important;
}

.tui-shadow-gray {
	box-shadow: 0 10rpx 14rpx 0 rgba(191, 191, 191, 0.2);
}

.tui-hover-gray {
	background: #f7f7f9 !important;
}

.tui-black-hover {
	background: #555 !important;
  color: #e5e5e5 !important;
}

.tui-black-hover-text{
  color: #e5e5e5 !important;
}

.tui-brown-hover{
	background: #A37F49 !important;
  color: #e5e5e5 !important;
}

.tui-brown-hover-text{
  color: #e5e5e5 !important;
}

/* button start*/

.tui-btn {
  /*#ifndef APP-NVUE*/
	width: 100%;
  /*#endif*/
	position: relative;
	border-width: 0;
	border-radius: 14rpx;
	padding-left: 0;
	padding-right: 0;
}

/*#ifndef APP-NVUE*/
.tui-btn::after {
	content: '';
	position: absolute;
	width: 200%;
	height: 200%;
	transform-origin: 0 0;
	transform: scale(0.5, 0.5) translateZ(0);
	box-sizing: border-box;
	left: 0;
	top: 0;
	border-radius: 14rpx;
	border: 0;
}
/*#endif*/

.tui-text-bold {
	font-weight: bold;
}

/*#ifndef APP-NVUE*/
.tui-btn-white::after {
	border: 1px solid #ffffff;
}
/*#endif*/

.tui-white-hover {
	background: $color-background !important;
  color: #2e2e2e !important;
}

.tui-white-hover-text{
  color: #2e2e2e !important;
}

.tui-dark-disabled {
	opacity: 0.6 !important;
  color: #fafbfc !important;
}

.tui-dark-disabled-text{
  color: #fafbfc !important;
}

.tui-dark-disabled-outline {
	opacity: 0.5 !important;
}

.tui-gray-disabled {
	background: #f3f3f3 !important;
  color: #919191 !important;
	box-shadow: none;
}

.tui-gray-disabled-text{
  color: #919191 !important;
}

.tui-outline-hover {
	opacity: 0.5;
}

.tui-primary-hover {
	background-image: $color-background-button-hover !important;
  color: $font-color-button !important;
}

.tui-primary-hover-text{
  color: $font-color-button !important;
}

/*#ifdef APP-NVUE*/
.tui-btn-primary:active{
  background-image: $color-background-button-hover !important;
}
/*#endif*/

.tui-primary-outline::after {
  border: none !important;
}

.tui-primary-outline {
	color: $color-primary !important;
	background: transparent;
  border:2rpx solid $color-primary;
}

.tui-danger-hover {
	background: #c80808 !important;
	color: #e5e5e5 !important;
}

.tui-danger-outline {
	color: #eb0909 !important;
	background: transparent;
}

/*#ifndef APP-NVUE*/
.tui-danger-outline::after {
	border: 1px solid #eb0909 !important;
}
/*#endif*/

.tui-warning-hover {
	background: #d67326 !important;
	color: #e5e5e5 !important;
}

.tui-warning-outline {
	color: #fc872d !important;
	background: transparent;
}

/*#ifndef APP-NVUE*/
.tui-warning-outline::after {
	border: 1px solid #fc872d !important;
}
/*#endif*/

.tui-green-hover {
	background: #06ad56 !important;
	color: #e5e5e5 !important;
}

.tui-green-outline {
	color: #07c160 !important;
	background: transparent;
}

/*#ifndef APP-NVUE*/
.tui-green-outline::after {
	border: 1px solid #07c160 !important;
}
/*#endif*/

.tui-blue-hover {
	background: #0062cc !important;
	color: #e5e5e5 !important;
}

.tui-blue-outline {
	color: #007aff !important;
	background: transparent;
}

/*#ifndef APP-NVUE*/
.tui-blue-outline::after {
	border: 1px solid #007aff !important;
}
/*#endif*/

/* #ifndef APP-NVUE */
.tui-btn-gradual {
	background: linear-gradient(90deg, rgb(255, 89, 38), rgb(240, 14, 44)) !important;
	color: #FFFFFF !important;
}

.tui-shadow-gradual {
	box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.15);
}

.tui-btn-gradient-primary{
  background: linear-gradient(135deg, #66DEFC 0%, #246DF7 100%)!important;
  color: #FFFFFF !important;
}

/* #endif */

.tui-gray-hover {
	background: #a3a3a3 !important;
	color: #898989;
}

/* #ifndef APP-NVUE */
.tui-gradual-hover {
	background: linear-gradient(90deg, #d74620, #cd1225) !important;
	color: #FFFFFF !important;
}

/* #endif */

.tui-gray-outline {
	color: $font-color-t1 !important;
	background: transparent !important;
  border:2rpx solid $color-border!important;
}

.tui-gray-outline-text{
  color: $font-color-t1 !important;
}

.tui-white-outline {
	color: #FFFFFF !important;
	background: transparent !important;
}

.tui-black-outline {
	background: transparent !important;
	color: #333 !important;
}

/*#ifndef APP-NVUE*/
.tui-gray-outline::after {
	border:none;
}

.tui-white-outline::after {
	border: 1px solid #FFFFFF !important;
}

.tui-black-outline::after {
	border: 1px solid #333 !important;
}
/*#endif*/

.tui-brown-outline {
	color: #ac9157 !important;
	background: transparent;
}

/*#ifndef APP-NVUE*/
.tui-brown-outline::after {
	border: 1px solid #ac9157 !important;
}
/*#endif*/

/*圆角 */

.tui-fillet {
	border-radius: 50rpx!important;
}

/*#ifndef APP-NVUE*/
.tui-btn-white.tui-fillet::after {
	border-radius: 98rpx!important;
}

.tui-outline-fillet::after {
	border-radius: 98rpx!important;
}
/*#endif*/

/*平角*/
.tui-rightAngle {
	border-radius: 0!important;
}

/*#ifndef APP-NVUE*/
.tui-btn-white.tui-rightAngle::after {
	border-radius: 0!important;
}

.tui-outline-rightAngle::after {
	border-radius: 0!important;
}
.tui-btn__link::after {
	border: 0 !important;
}
/*#endif*/
.flex-item{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
